<template>
	<view class="navbar-frame" :style="{
		height: `${menuInfo.detailsTop}px`,
		
		backgroundColor: `rgba(255, 255, 255, ${opacity})`,
		boxShadow: `0 0 3px -1px rgba(100, 100, 100, ${opacity})`
	}">
		<view class="navbar-content" :style="{
					top: `${menuInfo.menuTop}px`,
					height: `${menuInfo.menuHeight}px`,
					width: `calc(100% - ${menuInfo.menuWidth}px - 60rpx)`
				}">
			<view class="image-frame" @click="handleBack">
				<uv-icon name="arrow-left" size="24"></uv-icon>
			</view>
			<view class="image-frame">
				<view class="searchBox" :style="{
							opacity: opacity
						}">
					<uv-search placeholder="请输入搜索内容" v-model="keyword" animation="false"></uv-search>
				</view>
			</view>
		</view>

		<view class="tabs-box" :style="{
					top: `${menuInfo.menuTop + 30}px  `,
					height: `${menuInfo.menuHeight}px`,
					width: `calc(100% - ${menuInfo.menuWidth}px )`
				}">
			<view class="" :style="{
							opacity: opacity
						}">
				<uv-tabs :list="list" @click="clickroll" inactive-style="color:'#666666'" lineColor="#daa03d"
					:activeStyle="{ color: '#daa03d'} "></uv-tabs>
			</view>
		</view>


	</view>
</template>

<script>
	const app = getApp()
	export default {
		name: "navbar",
		data() {
			return {
				menuInfo: app.globalData.menuInfo,
				list: [{
					name: '商品',
					id: 'product'
				}, {
					name: '评价',
					id: 'evaluate'
				}, {
					name: '详情',
					id: 'details'
				}, ]
			};
		},
		props: {
			opacity: {
				type: Number,
				default: 0
			}
		},
		watch: {
			opacity() {}
		},
		mounted() {
			// console.log(this.menuInfo)
		},
		methods: {
			handleBack() {
				uni.navigateBack({
					delta: 1,
				});
			},
			clickroll(e) {
					this.$emit('jump', {
						id: e.id,
						  navHeight: this.menuInfo.detailsTop
					});
				
			}
		}

	}
</script>

<style lang="scss" scoped>
	.navbar-frame {
		position: fixed;
		width: 100%;
		top: 0;
		left: 0;
		z-index: 10;



		.navbar-content {
			width: 100%;
			position: absolute;
			left: 30rpx;
			display: flex;

			.image-frame {
				height: 100%;
				display: flex;
				align-items: center;
				position: relative;

				.searchBox {
					width: 90%;
					margin: 0 auto;
				}

				.image-text {
					height: 70%;
					width: 84.1931034483px;
					margin-left: 10px;
				}

				// .image-texts {
				// 	width: 84.1931034483px;
				// 	height: 70%;
				// 	margin-left: 10px;
				// 	position: absolute;
				// }
			}

		}

		.tabs-box {
			width: 100%;
			position: absolute;
			left: 30rpx;
			display: flex;
		}
	}
</style>